<template>
	<view class="content">
		<view v-if="hasLogin">
			<view class="goods">
				<view class="tit">
					<button @click="addGood">添加</button>
					<input class="uni-input" @input="onInputTitle" placeholder="查询:输入商品名称" />
					<button @tap="onSearch">查询</button>
				</view>
				<good-list :goods="goods" :baseUrl="baseUrl" @goodsItemClick="goGoodDetail" @goodsDelete="goodsDelete"></good-list>
				<view v-if="flag" class="isOver">---我到底了---</view>
			</view>
		</view>
		<view v-if="!hasLogin">
			<view class="title">你好，游客！</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import goodsList from '@/components/good-list/good-list.vue'
	export default {
		computed: mapState(['hasLogin', 'userInfo']),		
		data() {
			return {
				title: '',
				goods: [],
				pageindex: 1,
				flag: false,
				user_id: 0,
				baseUrl: getApp().globalData.baseUrl,
			}
		},
		components: {
			"goods-list": goodsList
		},
		methods: {
			goodsDelete(id) {
				uni.showModal({
					content: '你确定要删除本件物品吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('删除数据id=', id)
							this.deleteGoods(id)
							uni.startPullDownRefresh()
						}
					}
				})
			},
			goGoodDetail(id, space_id) {
				uni.navigateTo({
					url: '../good/good-detail?id=' + id + '&space_id=' + space_id
				})
			},
			async getGoods() {
				//console.log('Login Status=',this.userInfo)
				//if (!this.hasLogin) {
				//	this.login()
				//} else {
					const res = await this.$myRequest({
						url: getApp().globalData.baseUrl + '/api.goods/list?user_id=' + this.userInfo.id + '&page=' + this.pageindex + '&title=' +
							this.title,
						token : this.userInfo.token,
						method: 'GET',
					})
					this.goods = [...this.goods, ...res.data.data]
					//console.log(this.goods)
				//}
			},
			async deleteGoods(id) {
				const res = await this.$myRequest({
					url: getApp().globalData.baseUrl + '/api.goods/' + id,
					token : this.userInfo.token,
					method: 'DELETE',
				})
				//console.log(this.goods)
			},
			login() {
				uni.showModal({
					title: '未登录',
					content: '您还未登录，需要登录后使用！',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							uni.reLaunch({
								url: '../login/login'
							})
						}
					}
				})
			},
			addGood() {
				uni.navigateTo({
					url: '/pages/good/add-good'
				})
			},
			onInputTitle: function(e) {
				this.title = e.detail.value
			},
			onSearch() {
				this.pageindex = 1
				this.goods = []
				this.getGoods()
			},
		},
		onReachBottom() {
			if (this.goods.length < this.pageindex * 10) return this.flag = true
			console.log('到底了')
			this.pageindex++
			this.getGoods()
		},
		onPullDownRefresh() {
			console.log('下拉刷新了')
			this.pageindex = 1
			this.goods = []
			this.flag = false
			setTimeout(() => {
				this.getGoods();
				uni.stopPullDownRefresh();
			}, 1000)
		},
		onLoad() {
			this.getGoods()
			console.log('Index载入hasLogin:',this.hasLogin)
		},
	}
</script>

<style lang="scss">
	.content {
		.goods {
			background: #eee;
			overflow: hidden;

			.tit {
				height: 40px;
				display: flex;
			}
		}
	}

	.isOver {
		width: 100%;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}
</style>
